<template>
	<view class="component-list-container flex">
		<view 
			class="component-item flex"
			v-for="(item, index) in list"
			:key="item.path"
			@click="togglelist(index)"
		>
			<view :class="[item.isOpen ? 'active': '', 'subtitle', 'flex']">
				<text>{{item.title}}</text>
				<image v-if="!item.children.length" class="arrow" src="../../static/icons/arrow-right.png" />
			</view>
			
			<view
				v-if="item.isOpen"
				class="children flex"
				v-for="(child, index) in item.children"
				:key="child.path"
				@click="selectItem(child.path)"
			>
				<view class="subtitle flex">
					<text>{{child.title}}</text>
					<image class="arrow" src="../../static/icons/arrow-right.png" />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref} from 'vue'
import {jslist} from '@/plugins/api-mock'

const list = ref(jslist.map(item => ({isOpen: false, ...item})))

function togglelist(index) {
	const listVal = list.value
	for (let i = 0; i < listVal.length; i++) {
		if (index === i) {
			listVal[i].isOpen = !listVal[i].isOpen
		} else {
			listVal[i].isOpen = false
		}
	}
	list.value = listVal
}
function selectItem(url) {
	if (!url) {
		uni.showModal({
			showCancel: false,
			content: '无页面路径'
		})
		return
	}
	uni.navigateTo({url})
}
</script>

<style lang="scss" scoped>
@import '@/styles/var.scss';
@import '@/styles/mixin.scss';

page {
	@include flexCenter();
	background-color: $bg-s;
}

.component-list-container {
	flex-direction: column;
	margin-top: $base-margin-s;
	.component-item {
		width: 652rpx;
		margin: $base-margin-s 0;
		flex-direction: column;
		justify-content: space-between;
		@include sc($font-size-p, $font-color-d);
		.subtitle {
			width: 100%;
			padding: $base-padding;
			background-color: $bg-p;
			justify-content: space-between;
			border-bottom: 1px solid #f0f0f0;
			.arrow {
				@include wh(28rpx, 28rpx);
			}
		}
		.children {
			width: 100%;
			flex-direction: column;
			justify-content: space-between;
		}
		.active {
			color: #fff;
			background-color: $bg;
		}
	}
}
</style>
